<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>composition - 计算属性 computed</title>
	<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
	<div id="root"></div>
	<script>
		// computed 计算属性
		const app = Vue.createApp({
			template:
			`<div>
				<span @click="handleClick">{{countObj.count}}</span>	---{{countAddFive}}
				</div>`,
			setup() {
				const {ref, computed,reactive} = Vue
				const count = ref(0)
				const countObj = reactive({count:0})
				const handleClick = () =>{
					countObj.count +=1
				}
				// const countAddFive = computed(()=>{
				// 	return  count.value +5
				// })
				let countAddFive = computed({
					get:()=>{
						return 	countObj.count +5;
					},
					set:(param)=>{// param 参数
						countObj.count = param - 5;
					}
				})


				setTimeout(()=>{
					countAddFive.value =100
				},3000)
				return {
					count,countObj,countAddFive,handleClick
				}
			},
		})
		const vm = app.mount('#root');
	</script>
</body>
</html>